import {useRequest} from "ahooks";
import {getQuestionStatListService} from "../../../services/stat";
import {useParams} from "react-router-dom";
import {useState} from "react";
import {Pagination, Spin, Table, Typography} from "antd";
import useGetComponentInfo from "../../../hooks/useGetComponentInfo";
import {STAT_PAGE_SIZE} from "../../../constant";

type PropsType = {
    selectedComponentId: string
    setSelectedComponentId: (id: string) => void
    setSelectedComponentType: (type: string) => void
}

const {Title} = Typography
export const PageStat = (props: PropsType) => {
    const {selectedComponentId, setSelectedComponentType, setSelectedComponentId} = props
    const {id = ''} = useParams()
    const [page, setPage] = useState(1)
    const [pageSize, setPageSize] = useState(STAT_PAGE_SIZE)
    const [total, setTotal] = useState(0)
    const [list, setList] = useState([])
    const {loading} = useRequest(async () => {
        return await getQuestionStatListService(id, {page: 1, pageSize: 10})
    }, {
        refreshDeps:[id,page,pageSize],
        onSuccess: (res) => {
            const {total, list = []} = res
            setTotal(total)
            setList(list)
        }
    })
    const {componentList} = useGetComponentInfo()
    const columns = componentList.map(c => {
        const {fe_id, props = {}, title, type} = c;
        const colTitle = props.title || title;
        return {
            // title: colTitle,
            title: (
                <div style={{cursor: 'pointer'}} onClick={() => {
                    setSelectedComponentId(fe_id)
                    setSelectedComponentType(type)
                }}>
                    <span style={{color: fe_id === selectedComponentId ? '#1890ff' : 'inherit'}}>{colTitle}</span>
                </div>
            ),
            dataIndex: fe_id
        }
    })
    const dataSource = list.map((i: any) => ({...i, key: i._id}))
    const TableElem = <>
        <Table columns={columns} dataSource={dataSource} pagination={false}></Table>
        <div style={{textAlign: 'center', marginTop: '20px'}}>
            <Pagination total={total} pageSize={pageSize} current={page} onChange={setPage}
                        onShowSizeChange={(page, pageSize) => {
                            setPage(page);
                            setPageSize(pageSize)
                        }}></Pagination>
        </div>
    </>
    return (
        <div>
            <Title level={3}>答卷数量：{!loading && total}</Title>
            {loading && (<div style={{textAlign: 'center'}}>
                <Spin></Spin>
            </div>)}
            {!loading && TableElem}
        </div>
    );
};